/**
 * @file _cyberpunk.scss
 * @description 定义赛博朋克主题的 CSS 变量，升级为玻璃拟态霓虹风格。
 */
.theme-cyberpunk {
  // 背景 - 增强了背景的色彩和动态感
  --bg-color: #0d0f1f; // 深邃的星空蓝
  --bg-image: radial-gradient(ellipse at 10% 10%, rgba(255, 0, 255, 0.4) 0%, transparent 40%), radial-gradient(ellipse at 90% 90%, rgba(0, 223, 255, 0.4) 0%, transparent 40%), radial-gradient(ellipse at 50% 50%, rgba(100, 100, 220, 0.2) 0%, transparent 60%);
  --bg-color-secondary: #1a1c36;
  --bg-color-tertiary: #24284d;

  // 文本 - 提高可读性
  --text-color: #e0e8ff; // 带一点蓝紫色的亮白
  --text-color-secondary: #4dffff; // 更亮的青色
  --text-color-light: rgba(224, 232, 255, 0.75);
  --text-color-disabled: rgba(224, 232, 255, 0.4);

  // 主色调 - 更加鲜艳
  --primary-color: #00ffff;
  --primary-color-rgb: 0, 255, 255;
  --primary-color-hover: #00aaff; // 使用亮蓝色作为悬停/激活色，与主色调更和谐
  --primary-color-light: rgba(0, 255, 255, 0.25);
  --primary-color-dark: #00cccc;
  --text-color-on-primary: #000000; // 在高亮青色上，黑色文字更清晰

  // 辅色调
  --secondary-color: #00aaff; // 辅色调也使用亮蓝色

  // 状态色 - 调整饱和度
  --success-color: #22ff88;
  --danger-color: #ff3366;
  --warning-color: #ffaa33;
  --info-color: #33aaff;

  // 边框 - 霓虹效果
  --border-color: rgba(0, 255, 255, 0.3);
  --border-color-emphasis: rgba(0, 255, 255, 0.6);
  --border-color-light: rgba(0, 255, 255, 0.15);
  --border-radius-base: 4px;
  --border-radius-large: 20px;
  --border-radius-small: 8px;

  // 阴影与辉光 - **核心光污染**
  --box-shadow-base: 0px 2px 10px rgba(185, 51, 255, 0.3), 0px 0px 5px rgba(185, 51, 255, 0.1) inset;
  --primary-glow: 0 0 5px #fff, 0 0 10px var(--primary-color-hover), 0 0 20px var(--primary-color-hover), 0 0 30px var(--primary-color), 0 0 40px var(--primary-color);
  --secondary-glow: 0 0 5px #fff, 0 0 10px var(--secondary-color), 0 0 20px var(--secondary-color), 0 0 30px var(--primary-color), 0 0 40px var(--primary-color);

  // 字体
  --font-family-base: '"Inter", system-ui, sans-serif';
  --font-family-heading: '"Orbitron", var(--font-family-base)';

  // 玻璃效果（不知道为什么会影响到CFeatureCard组件, 顶部无顶部脉冲条，无底部滚动条（这是对的））
  --backdrop-blur: 15px; // 稍微降低模糊度，让背景图案更清晰
  
  // 新增：禁用状态变量
  --disabled-bg-color: #24284d;
  --disabled-border-color: rgba(0, 255, 255, 0.2);
  --disabled-text-color: rgba(224, 232, 255, 0.3);

  // 组件特定变量 - 下拉框
  --select-bg: var(--glass-bg);
  --select-border-color: var(--border-color-emphasis);
  --select-backdrop-filter: blur(10px);
  --select-before-content: '';
  --select-border-gradient: linear-gradient(45deg, #00ffff, #ff00ff, #ffff00, #00ffff);
  --select-border-opacity: 0;
  --select-option-hover-bg: rgba(0, 255, 255, 0.15);

  // 组件特定变量 - 时间选择器
  --time-picker-bg: var(--glass-bg);
  --time-picker-border-color: var(--border-color-emphasis);
  --time-picker-backdrop-filter: blur(10px);
  --time-picker-before-content: '';
  --time-picker-border-gradient: linear-gradient(45deg, var(--primary-color), var(--primary-color-hover), #ffff00, var(--primary-color));
  --time-picker-border-opacity: 0;
  --time-picker-cell-hover: var(--hover-overlay);

  // 无障碍增强
  --focus-ring: 0 0 0 2px var(--bg-color-secondary), 0 0 0 4px var(--primary-color-hover), 0 0 10px rgba(0, 170, 255, 0.5);
  --hover-overlay: rgba(0, 255, 255, 0.1);
  --active-overlay: rgba(0, 255, 255, 0.2);

  // 玻璃和霓虹效果
  --glass-bg: rgba(27, 27, 45, 0.7);
  --glass-border: rgba(0, 255, 255, 0.4);
  --neon-glow: 0 0 5px var(--primary-color), 0 0 15px var(--primary-color-hover), 0 0 30px var(--primary-color-hover);

  // 滚动条
  --scrollbar-track: var(--bg-color-secondary);
  --scrollbar-thumb: var(--primary-color);
  --scrollbar-thumb-hover: var(--primary-color-hover);

  // 链接状态
  --link-color: var(--primary-color);
  --link-hover-color: var(--primary-color-hover);
  --link-visited-color: #9d84ff; // 改为更柔和的蓝紫色

  // 特殊效果变量
  --scan-line: linear-gradient(90deg, transparent 0%, rgba(0, 255, 255, 0.15) 50%, transparent 100%);
  --circuit-pattern: radial-gradient(circle at 20% 80%, rgba(0, 255, 255, 0.05) 0%, transparent 50%),
                     radial-gradient(circle at 80% 20%, rgba(0, 255, 255, 0.05) 0%, transparent 50%);
}

// 高对比度模式 - 保持科技感
@media (prefers-contrast: high) {
  html.theme-cyberpunk {
    --text-color: #ffffff;
    --text-color-secondary: #00ffff;
    --border-color-emphasis: #00ffff;
    --primary-color: #00ffff;
    --primary-color-hover: #00aaff;
    --focus-ring: 0 0 0 3px var(--primary-color-hover);
  }
}

// 减少动画 - 无障碍考虑
@media (prefers-reduced-motion: reduce) {
  html.theme-cyberpunk {
    &.with-scan-lines::after {
      animation: none;
    }
  }
}
